<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>日期表</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body{
				background-color: #CCCCCC;
			}
			
			li {
				list-style: none;
			}
			
			a{
				display: block;
				color: #666;
				text-decoration: none;
			}
			
			.app {
				width: 550px;
				margin: 100px auto;
				padding: 10px;
				background-color: #fff;
			}
			
			.title {
				overflow: hidden;
			}
			
			.title>a {
				position: relative;
				z-index: 10;
				float: left;
				width: 86px;
				height: 32px;
				text-align: center;
				line-height: 32px;
				margin-right: 10px;
				border: 1px solid #ccc;
				background-color: #fff;
			}
			
			.app ul {
				display: none;
				padding: 5px;
				border: 1px solid #ccc;
				transform: translateY(-1px);
			}
			
			.app li{
				display: flex;
				justify-content: space-between;
			}
			
			.app li>a,
			.app li>span{
				text-align: center;
				margin: 5px;
			}
			
			.tableM li>a,
			.tableD li>a{
				flex: 1;
				text-align: center;
			}
			
			.app li>a:hover{
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="app">
			<div class="title">
				<a href="javascript:;" id="titleY"><span id="y">请选择 </span>年</a>
				<a href="javascript:;" id="titleM"><span id="m">请选择 </span>月</a>
				<a href="javascript:;" id="titleD"><span id="d">请选择 </span>日</a>
			</div>
			<ul class="tableY"></ul>
			<ul class="tableM"></ul>
			<ul class="tableD"></ul>
		</div>
		<script type="text/javascript">
			
			var app = document.querySelector('.app')
			var title = document.querySelector('.title')
			var titleY = document.querySelector('#titleY')
			var titleM = document.querySelector('#titleM')
			var titleD = document.querySelector('#titleD')
			var tableY = document.querySelector('.tableY')
			var tableM = document.querySelector('.tableM')
			var tableD = document.querySelector('.tableD')
			var m = document.querySelector('#m')
			
			var uls = app.querySelectorAll('ul')
			var aAll = title.querySelectorAll('a')
			
			//创建年份表
			function year() {
				//30后~90后
				for(var i = 90; i >= 30; i -=10) {
					//创建li
					var cli = document.createElement('li')
					//创建span
					var cspan = document.createElement('span')
					//span添加内容
					cspan.innerText = i + '后：'
					//把span添加到li中
					cli.appendChild(cspan)
					//具体年份
					for (var j = 1900 + i; j <= 1909 + i; j ++) {
						//创建a标签
						var ca = document.createElement('a')
						//设置a的路径
						ca.href = 'javascript:;'
						//添加年份
						ca.innerText = j
						//把a添加到li中
						cli.appendChild(ca)
					}
					//把li添加到ul中
					tableY.appendChild(cli)
				}
			}
			
			//创建月份表
			function month() {
				var cli = document.createElement('li')
				for(var i = 1; i <= 12; i ++) {
					var ca = document.createElement('a')
					ca.href = 'javascript:;'
					ca.innerText = i
					cli.appendChild(ca)
				}
				tableM.appendChild(cli)
			}
			
			//创建日期表
			function date() {
				//前两行
				for(var i = 0; i <= 1; i ++) {
					var cli = document.createElement('li')
					for(var j = 1; j <= 11; j ++) {
						var ca = document.createElement('a')
						ca.href = 'javascript:;'
						ca.innerText = i*11+j
						cli.appendChild(ca)
					}
					tableD.appendChild(cli)
				}
				//第三行，获取月份判断天数，默认30天
				var cli3 = document.createElement('li')
				var month = Number(m.innerText) || 1
				var num = 31
				//判断是否是2月
				if(month == 2) {
					num = 28
				} else if(month == 4 || month == 6 || month == 9 || month == 11){
					num = 30
				}
				for(var k = 23; k <= num; k ++) {
					var ca = document.createElement('a')
					ca.innerText = k
					cli3.appendChild(ca)
				}
				tableD.appendChild(cli3)
			}
			
			//title点击事件
			function click(obj, show) {
				obj.onclick = function() {
					//清除其他两个表的样式
					uls.forEach(function(item) {
						item.style.display = 'none'
					})
					//清除其他两个title的样式
					aAll.forEach(function(item) {
						item.style.cssText = "z-index: 0;"
					})
					this.style.cssText = "z-index: 10;border: 1px solid #38f;border-bottom-color: #FFF;"
					show.style.cssText = "display: block;border: 1px solid #38f;"
				}
			}
			
			//日期选择事件
			function dateClick() {
				//给每个ul添加事件委托
				uls.forEach(function(item) {
					//点击ul后触发
					item.onclick = function(e) {
						var e = e || window.event
						var target = e.target || e.srcElement
						if(target.nodeName.toLowerCase() == 'a') {
							//更新title中的值
							switch(item.className) {
								case 'tableY': 
									titleY.querySelector('span').innerText = target.innerText
									break
								case 'tableM': 
									titleM.querySelector('span').innerText = target.innerText
									tableD.innerHTML = ''
									//重新渲染日期页面
									date()
									break
								case 'tableD': 
									titleD.querySelector('span').innerText = target.innerText
									break
								default: break
							}
						}
					}
				})
			}
			
			window.onload = function() {
				year()
				month()
				date()
				click(titleY, tableY)
				click(titleM, tableM)
				click(titleD, tableD)
				dateClick()
			}
			
		</script>
	</body>

</html>